import React, {useEffect, useRef, useState} from "react";
import "./index.scss"; // 引入样式文件
import {ESGltfModel, ESImageLabel, type ESJVector2D} from "earthsdk3";
// @ts-ignore
import {ESObjectsManager, type ESSceneObject} from "earthsdk3";
import {ESUeViewer} from "earthsdk3-ue";
import {ESCesiumViewer} from "earthsdk3-cesium";
import {createAnimateFrame} from "xbsj-base";
import {getDistancesFromPositions} from "earthsdk3";
// 创建 ESObjectsManager 实例
const objm = new ESObjectsManager(ESUeViewer, ESCesiumViewer);
const Distance: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);
    const [distance, setDistance] = useState(1000);
    useEffect(() => {
        if (!containerRef.current) return;

        // 创建 Cesium 视口
        const viewer = objm.createCesiumViewer(containerRef.current);
        objm.viewerCreatedEvent.don((viewer) => {
            viewer.flyIn(
                [112.50822239361301, 24.184200588142783, 117.67829302617332],
                [343.750015528038, -34.091324192800556, 359.99981961448066],
                3,
            );
        });
        console.log("viewer", viewer);
        // 通过json创建一个影像图层,加载全球影像切片
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            show: true,
            type: "ESImageryLayer",
            maximumLevel: 18,
            name: "全球影像",
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });
        /** ---------------------------------创建可视化对象------------------------------------**/
        const sceneObj = objm.createSceneObjectFromJson({
            id: "b88d1189-7f10-48bd-8eb0-49bf03e7d810",
            type: "ESPipeline",
            show: false,
            name: "单箭头管线1",
            stroked: false,
            filled: true,
            fillStyle: {
                color: [1, 0, 0.73, 1],
                material: "",
                materialParams: {},
                ground: false,
            },
            points: [
                [112.50551182487118, 24.185964202951887, 0.1],
                [112.509491893336, 24.18536806675219, 0.1],
            ],
        });

        // 帧序列Tick
        const p = createAnimateFrame();
        // 启动
        p.start(() => {
            const {position} = objm.activeViewer.getCurrentCameraInfo();
            // 计算距离
            const distance1 = getDistancesFromPositions(
                [[...position], [...sceneObj.points[0]]],
                "NONE",
            );
            console.log("distance1[0] ", distance1[0]);
            sceneObj.show = distance1[0] < distance;
            console.log("distance", distance);
            console.log("sceneObj.show", sceneObj.show);
        });
    }, []);
    const changeDistance = () => {
        if (inputRef.current) {
            const newDistance = Number(inputRef.current.value);
            console.log("变化了", newDistance);
            if (!isNaN(newDistance)) {
                setDistance(newDistance);
            }
        }
    };
    const inputRef = useRef(null);
    return (
        <div className="box">
            <div className="container" ref={containerRef}></div>
            <input
                ref={inputRef}
                type="number"
                defaultValue={distance}
                onChange={changeDistance}
            />
        </div>
    );
};

export default Distance;
